<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div :class="tabCls(item)" v-for="(item,index) in navList" @click="handleChange(index)" :key="item.name">
        {{item.label}}
      </div>
    </div>
    <div class="tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    value: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentValue: this.value,
      navList: []
    }
  },
  methods: {
    tabCls (item) {
      return [
        'tabs-tab',
        {
          'tabs-tab-active': item.name === this.currentValue
        }
      ]
    },
    getTabs () {
      // 获取pane
      return this.$children.filter(function (item) {
        return item.$options.name === 'pane'
      })
    },
    updateNav () {
      // 获取标题，name,并放置到navList数组中
      this.navList = []
      let _this = this
      this.getTabs().forEach(function (pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index

        })
        if (!pane.name) pane.name = index
        if (index === 0) {
          if (!_this.currentValue) {
            _this.currentValue = pane.name || index
          }
        }
      })
      this.updateStatus()
    },
    updateStatus () {
      let tabs = this.getTabs()
      let _this = this
      tabs.forEach(function (tab) {
        let b = tab.name === _this.currentValue
        tab.show = b
        return tab.show
      })
    },
    handleChange (index) {
      if (this.disabled) return
      let nav = this.navList[index]
      let name = nav.name
      this.currentValue = name
      this.$emit('input', name)
      this.$emit('on-click', name)
    }
  },
  watch: {
    value: function (val) {
      this.currentValue = val
    },
    currentValue () {
      this.updateStatus()
    }
  }
}
</script>

<style scoped lang="scss">
$borderColor: rgb(235, 238, 245);
$borderAcColor: #3399ff;
[v-cloak] {
  display: none;
}

.tabs {
  font-size: 16px;
  color: #545f6a;
}
.tabs-bar:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: $borderColor;
  margin-top: -1px;
}

.tabs-tab {
  font-weight: bold;
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid white;
  border-bottom: 1px solid $borderColor;
  cursor: pointer;
  position: relative;
}
.tabs-tab-active {
  color: #3399ff;
  border-bottom: 1px solid white;
  border-top: 1px solid $borderAcColor;
  border-left: 1px solid $borderColor;
  border-right: 1px solid $borderColor;
}
.tabs-tab-active:before {
  content: '';
  display: block;
  height: 1px;
  background: #3399ff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tabs-content {
  padding: 20px 0 0;
}
</style>
